import React, { use, useCallback, useEffect, useRef, useState } from 'react'
import { Flex, Table } from 'antd'
import type { TableColumnsType } from 'antd'
import { createStyles } from 'antd-style'
import WorkListModal, { type WorkListModalHandle } from './work-list'
import './index.css'

const useStyle = createStyles(({ css, token }) => {
    const antCls = 'antd'
    return {
        customTable: css`
      ${antCls}-table {
        ${antCls}-table-container {
          ${antCls}-table-body,
          ${antCls}-table-content {
            scrollbar-width: thin;
            scrollbar-color: #eaeaea transparent;
            scrollbar-gutter: stable;
          }
        }
      }
    `,
    };
})

export interface MonthWeeksProps {
    [x: string]: any,
    mouthData: any[],
}

interface FixedDataType {
    key: React.Key;
    name: string;
    description: string;
}

const fixedColumns: TableColumnsType<FixedDataType> = [
    {
        title: '项目/任务',
        dataIndex: 'name',
        fixed: true,
        width: 250,
        minWidth: 250,
        className: 'no-border-right',
    },
    {
        title: '已记录',
        dataIndex: 'times',
        fixed: true,
        width: 100,
        align: 'right',
        minWidth: 100,
    }
]


const project = ['测试项目1', '测试项目二', '测试项目三', '测试项目四', '测试项目五', '测试项目六']
const fixedDataSource = Array.from({ length: 6 }).map<FixedDataType>((_, i) => ({
    key: i,
    name: project[i % 6],
    description: '',
    children: [
        {
            key: `${i}-0`,
            name: `${project[i % 5]}-问题1`,
            description: '测试任务1',
            '01': 1,
            '05': 2,
            '15': 3,
        },
        {
            key: `${i}-1`,
            name: `${project[i % 5]}-问题2`,
            description: '测试任务2',
            '11': 1,
            '15': 2,
            '25': 3,
        },
        {
            key: `${i}-2`,
            name: `${project[i % 5]}-问题3`,
            description: '测试任务3',
            '10': 1.4,
            '18': 2.5,
            '25': 3.0,
        }
    ]
}));

const MonthWorks = (props: MonthWeeksProps) => {
    const { mouthData } = props
    const [containerHeight, setContainerHeight] = useState(0)
    const workListModalRef = useRef<WorkListModalHandle>(null)
    const { styles } = useStyle()
    const onCellClick = useCallback((record: any, key:string) => {
        workListModalRef.current?.showModal()
        console.log(key)
        console.log(record)
    }, [mouthData])
    const getColumns = useCallback(() => {
        return [
            ...fixedColumns,
            ...(mouthData || []).map((item) => {
                return {
                    title: () => (
                        <div>
                            {item.day} <br />
                            {item.week}
                        </div>
                    ),
                    dataIndex: item.day,
                    align: 'center',
                    with: 70,
                    minWidth: 65,
                    className: item.week === '周日' ? 'week-sunday' : '',
                    render: (value: any, record: any) => {
                        if(value){
                            return(
                                <a className='cell-a' onClick={()=> onCellClick(record, item.day)}>{value}</a>
                            )
                        }
                        return(
                            <span></span>
                        )
                    }
                }
            })
        ]
    }, [mouthData])
    useEffect(() => {
        const container = document.querySelector('.table-container')?.getClientRects()
        if (container) {
            setContainerHeight(container[0].height - 140)
        }

    }, [])
    return (
        <Flex vertical gap="small" className='table-container'>
            <Table<FixedDataType>
                className={styles.customTable}
                columns={getColumns() as any}
                dataSource={fixedDataSource}
                pagination={false}
                defaultExpandAllRows={true}
                size="middle"
                scroll={{ x: 'max-content', y: containerHeight }}
                bordered
                tableLayout={'auto'}
                summary={() => (
                    <Table.Summary fixed>
                        <Table.Summary.Row>
                            <Table.Summary.Cell index={0} className='no-border-right'>总计</Table.Summary.Cell>
                            <Table.Summary.Cell index={1} align='right'></Table.Summary.Cell>
                            {
                                (mouthData || []).map((item, index) => (
                                    <Table.Summary.Cell index={index + 2} key={index}>
                                    </Table.Summary.Cell>
                                ))
                            }
                        </Table.Summary.Row>
                    </Table.Summary>
                )}
            />
            <WorkListModal ref={workListModalRef}></WorkListModal>
        </Flex>
    );
};

export default MonthWorks